<template>
	<view
		class="container"
		style="height: calc(100vh - 100rpx); padding: 0 24rpx"
	>
		<view class="wrapper">
			<view class="dateControllerBar">
				<view class="date-box">
					<view class="date-tools">
						<view class="left">
							<button
								class="primary-button btn"
								@tap="clickWeek(1)"
							>
								上一周
							</button>
							<uni-datetime-picker
								type="date"
								@change="changeMonth($event)"
								:value="selectDate.valueOf()"
							>
								<text class="label">{{
									handleFormatDayjs(
										weekDateList[1][0],
										'YYYY年MM月'
									)
								}}</text>
							</uni-datetime-picker>
							<button
								class="primary-button btn"
								@tap="clickWeek(2)"
							>
								下一周
							</button>
						</view>
						<view class="right" style="display: none">
							<view
								v-for="(item, index) in timeArr"
								class="flex-1"
								@click="currentDateType = item.type"
								:class="
									item.type === currentDateType
										? 'active'
										: ''
								"
								:key="index"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="calendar">
						<view class="header">
							<view class="week-list">
								<text v-for="item in weekList" :key="item">{{
									item
								}}</text>
							</view>
						</view>
						<view
							class="calendarRef calendar_comp_wrap"
							ref="calendarRef"
						>
							<view class="calendar_comp_section">
								<view class="calendar_list_day">
									<view
										class="date_text"
										:style="{
											color: isOtherMonthDay(date)
												? '#333333'
												: '#CCCCCC',
										}"
										v-for="(date, key) in weekDateList[1]"
										:key="key"
										@click="selectDay(date)"
									>
										<text
											:class="
												renderClassName(date)
													? 'selectDay'
													: '#CCCCCC'
											"
											>{{
												handleFormatDayjs(date, 'DD')
											}}</text
										>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="f32 g6 df ac jsa top-filter">
						<view
							class="flex-1 lh80 df ac jsc"
							:class="item.checked.length ? 'g4' : ''"
							v-for="(item, index) in filterArr"
							:key="index"
							@click="openFilter(item)"
						>
							<view class="w80 text-over tc">{{
								showFilterSelect(item)
							}}</view>
							<text
								class="triangle mt10 ml10"
								:class="
									item.checked.length
										? 'bottom-act'
										: 'bottom-def'
								"
								v-if="item.type !== 'complaint'"
							></text>
						</view>
						<view v-show="filterBarShow" class="filterBarWrapper">
							<view
								class="filterMask"
								@click="closeFilter"
							></view>
							<view class="content-item">
								<view
									v-if="contentTypeVal === 'level'"
									class="df ac flw"
								>
									<view
										class="mr20 time-item"
										v-for="item in filterArr[0].options"
										:key="item.value"
										@click="
											setOptionValue('level', item.value)
										"
										:class="
											filterArr[0].checked.includes(
												item.value
											)
												? 'active-time'
												: ''
										"
									>
										{{ item.label }}
									</view>
								</view>
								<view
									v-if="contentTypeVal === 'type'"
									class="df ac flw"
								>
									<view
										class="mr20 time-item"
										v-for="item in filterArr[1].options"
										:key="item.value"
										@click="
											setOptionValue('type', item.value)
										"
										:class="
											filterArr[1].checked.includes(
												item.value
											)
												? 'active-time'
												: ''
										"
									>
										{{ item.label }}
									</view>
								</view>
								<view class="df ac mt20">
									<button
										class="default-button linear btn w40"
										@click="resetFilter"
									>
										重置
									</button>
									<button
										class="primary-button linear btn w40"
										@click="closeFilter"
									>
										确定
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="typeSwitchTab">
				<view
					class="tabItem"
					:class="switchTab === 0 ? 'active' : ''"
					@click="switchTab = 0"
				>
					未完成
					<text>({{ unFinishScheduleList.length }})</text>
				</view>
				<view
					class="tabItem"
					:class="switchTab === 1 ? 'active' : ''"
					@click="switchTab = 1"
				>
					已完成
					<text>({{ finishScheduleList.length }})</text>
				</view>
			</view>
			<view class="listWrapper">
				<template v-if="switchTab === 1">
					<scheduleItem
						:item="item"
						v-for="item in finishScheduleList"
						v-bind:key="item.id"
					></scheduleItem>
				</template>
				<template v-else>
					<scheduleItem
						:item="item"
						v-for="item in unFinishScheduleList"
						v-bind:key="item.id"
						@openOperateComplete="openOperateComplete"
						@refresh="getList"
					></scheduleItem>
				</template>
			</view>
			<view class="actionBar">
				<button
					class="primary-button linear btn w100"
					@click="openCreateAction"
				>
					增加日程
				</button>
			</view>
		</view>
		<operateComplete
			ref="operateCompleteRef"
			@complete="getList"
		></operateComplete>
		<uni-popup ref="createPop" type="bottom">
			<view class="createActionPopup">
				<view class="button" @click="createSchedule(1)">新增日程</view>
				<view class="button" @click="createSchedule(2)"
					>新增行动措施</view
				>
				<view class="cancel" @click="openCreateAction('close')"
					>取消</view
				>
			</view>
		</uni-popup>
	</view>
</template>
<script>
const dayjs = require('@/common/dayjs.min.js')
import { handleFormatDayjs } from '@/common/date'
import { generateWeekData } from '@/common/utils'
import { levelOptions, typeOptions } from './config'
import scheduleItem from '../components/scheduleItem.vue'
import operateComplete from '../components/operateCompletion/operateCompletion.vue'

import { listSchedule } from '@/apis/calendar'

export default {
	data() {
		const { generateWeekDateList } = generateWeekData(dayjs())
		return {
			filterBarShow: false,
			selectDate: dayjs(),
			weekDateList: generateWeekDateList,
			currentDateType: 'date',
			contentTypeVal: '',
			switchTab: 0,
			timeArr: [
				{
					type: 'date',
					name: '天',
				},
				{
					type: 'week',
					name: '周',
				},
				{
					type: 'month',
					name: '月',
				},
			],
			weekList: ['日', '一', '二', '三', '四', '五', '六'],
			filterArr: [
				{
					type: 'level',
					name: '优先级',
					checked: [],
					options: levelOptions,
				},
				{
					type: 'type',
					name: '类型',
					checked: [],
					options: typeOptions,
				},
			],
			finishScheduleList: [],
			unFinishScheduleList: [],
		}
	},
	components: {
		scheduleItem,
		operateComplete,
	},
	created() {
		this.getList()
	},
	methods: {
		handleFormatDayjs,
		openOperateComplete(event) {
			const data = event.data
			this.$refs.operateCompleteRef.init(data)
		},
		changeMonth(e) {
			this.selectDate = dayjs(e)
			const { generateWeekDateList } = generateWeekData(this.selectDate)
			this.weekDateList = generateWeekDateList
		},
		clickWeek(t) {
			const day =
				t === 1
					? this.weekDateList[1][0].subtract(1, 'week')
					: this.weekDateList[1][0].add(1, 'week')
			this.changeWeek(day)
		},
		changeWeek(day) {
			const { generateWeekDateList } = generateWeekData(day)
			this.weekDateList = generateWeekDateList
		},
		selectDay(day) {
			this.selectDate = day
			this.changeWeek(day)
		},
		isOtherMonthDay(date) {
			const isOtherMonthDay = date.isSame(this.selectDate, 'month')
			return isOtherMonthDay
		},
		// 选中日期
		renderClassName(date) {
			if (this.selectDate.isSame(date, 'day')) return true
			return false
		},
		getList() {
			const orgId = uni.getStorageSync('orgId')
			const startDate = handleFormatDayjs(this.selectDate)
			const schedulePriority = this.filterArr[0].checked
			const scheduleCategory = this.filterArr[1].checked
			listSchedule({
				orgId,
				startDate,
				endDate: startDate,
				schedulePriority,
				scheduleCategory,
			}).then((res) => {
				const { finishScheduleList, unFinishScheduleList } = res.data[0]
				this.finishScheduleList = [...finishScheduleList]
				this.unFinishScheduleList = [...unFinishScheduleList]
			})
		},
		//打开筛选框
		openFilter(row) {
			this.contentTypeVal = row.type
			this.filterBarShow = true
		},
		closeFilter() {
			this.filterBarShow = false
		},
		resetFilter() {
			this.filterArr[this.contentTypeVal === 'level' ? 0 : 1].checked = []
			this.getList()
		},
		setOptionValue(filterType, value) {
			this.filterArr = this.filterArr.map((filterItem) => {
				if (filterItem.type === filterType) {
					if (filterItem.checked.includes(value)) {
						filterItem.checked = filterItem.checked.filter(
							(v) => v !== value
						)
					} else {
						filterItem.checked = [...filterItem.checked, value]
					}
				}
				return filterItem
			})
		},
		openCreateAction(type) {
			if (type === 'close') {
				this.$refs.createPop.close()
			} else {
				this.$refs.createPop.open()
			}
		},
		createSchedule(type = 1) {
			uni.navigateTo({
				url: `/subPackagesLog/pages/workLog/schedule/create?date=${this.selectDate.valueOf()}&type=${type}`,
			})
			this.openCreateAction('close')
		},
		showFilterSelect(item) {
			const { name, checked, options } = item
			if (checked.length) {
				return options
					.filter((o) => checked.includes(o.value))
					.map((o) => o.label)
					.join(',')
			}
			return name
		},
	},
	watch: {
		selectDate() {
			this.getList()
		},
		filterArr() {
			this.getList()
		},
	},
}
</script>
<style lang="scss" scoped>
.warn {
	color: $warming-color;
}
.date-tools {
	margin-top: 10rpx;
	.left {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		text-align: center;
		gap: 10rpx;
		text {
			margin: 0 10rpx;
		}
		.btn {
			position: relative;
			z-index: 2;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			padding: 0 40rpx;
		}
		view {
			padding: 10rpx 20rpx;
			background-color: #dcdff0;
			color: $primary-color;
			border-radius: 10rpx;
		}
	}
	.right {
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		border-radius: 8rpx;
		border: 2rpx solid $primary-color;
		text-align: center;
		view {
			color: $primary-color;
			&:not(:last-child) {
				border-right: 2rpx solid $primary-color;
			}
			&.active {
				color: #fff;
				background-color: $primary-color;
			}
		}
	}
}

.typeSwitchTab {
	display: flex;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	border: 1px solid $primary-color;
	overflow: hidden;
	.tabItem {
		flex: 1;
		background: #ffffff;
		text-align: center;
	}
	.active {
		background: $primary-color;
		color: #ffffff;
	}
}

.week-list {
	display: flex;
	text {
		width: calc(100% / 7);
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 15px;
		font-family:
			PingFangSC-Regular,
			PingFang SC;
		color: #999999;
	}
}
.calendar_comp_wrap {
	width: 100%;
	height: 80rpx;
	position: relative;
	.calendar_comp_section {
		width: 100%;
		display: flex;
		background: #fff;
		.calendar_list_day {
			display: flex;
			flex-wrap: wrap;
			padding-top: 16rpx;
			flex-shrink: 0;
			width: 100%;
			background: #fff;
			position: absolute;
			.date_text {
				position: relative;
				margin-bottom: 30rpx;
				width: calc(100% / 7);
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 32rpx;
				font-family:
					PingFangSC-Medium,
					PingFang SC;
				font-weight: 500;
				color: #333333;
				text {
					width: 60rpx;
					display: inline-block;
				}
				.currentDay {
					background: rgba(255, 142, 34, 0.1) !important;
					color: #ff8e22 !important;
					padding: 12rpx 20rpx;
					border-radius: 16rpx;
				}
				.dot {
					position: absolute;
					bottom: 0px;
					left: 50%;
					width: 5px;
					height: 5px;
					border-radius: 50%;
					background: red;
				}
				.selectDay {
					border-radius: 50%;
					background: $primary-color !important;
					color: #ffffff !important;
					&.selectDayActive {
						padding: 6px 18px;
					}
				}

				.circle {
					display: block;
					width: 8px;
					height: 8px;
					background: #ccc;
					border-radius: 50%;
					margin: 0 auto;
					margin-top: 10px;
				}
			}
		}
	}
}
.top-filter {
	position: relative;
	.filterBarWrapper {
		position: absolute;
		left: -13px;
		right: 0;
		top: 100%;
		width: 100vw;
		height: calc(100vh - 400rpx);
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 2;
		border-top: 2rpx #eeeeee solid;
		.filterMask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
		}
	}
}
.content-item {
	position: relative;
	padding: 30rpx 20rpx 50rpx 20rpx;
	background: #fff;
	.time-item {
		border: 2rpx solid $primary-color;
		color: $primary-color;
		font-size: 36rpx;
		margin: 10rpx 15rpx 10rpx 0;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
	}
	.active-time {
		color: #fff;
		background-color: $primary-color;
		border: 2rpx solid $primary-color;
	}
}

.wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	.listWrapper {
		flex: 1;
		overflow: auto;
	}
}
.actionBar {
	padding: 20rpx 0;
	background-color: #fff;
}
.createActionPopup {
	display: flex;
	flex-direction: column;
	line-height: 120rpx;
	font-size: 34rpx;
	text-align: center;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	.button {
		border-bottom: 1px solid #eee;
	}
	.cancel {
		border-top: 4px solid #eee;
	}
}
</style>
